<template>
  <div id="center">
    <div class="center-box">
      <!--<el-amap class="amap-box"-->
      <!--         :vid="'amap-vue'"-->
      <!--         :center="[120.297071,29.137556]"-->
      <!--         mapStyle="dark"-->
      <!--&gt;</el-amap>-->
      <!--<charts-map></charts-map>-->
      <template v-if="showInside">
        <a-tooltip placement="topLeft"  v-for="(item, index) in pointList" :key="'inside__' + index">
          <template slot="title">
            <p style="min-width: 120px;">{{item.name}}</p>
            <p>剧组：{{item.crew}}</p>
            <p>人员：{{item.person}}</p>
            <div>车辆：{{item.car}}</div>
          </template>
          <a-icon type="home" theme="filled" class="center-item inside" :style="item.style"/>
        </a-tooltip>
      </template>
      <template v-if="showOutside">
        <a-tooltip placement="topLeft"  v-for="(item, index) in outPointList" :key="'outside_' + index">
          <template slot="title">
            <p style="min-width: 120px;">{{item.name}}</p>
            <p>剧组：{{item.crew}}</p>
            <p>人员：{{item.person}}</p>
            <div>车辆：{{item.car}}</div>
          </template>
          <!--<div class="center-item outside" :style="item.style"></div>-->
          <a-icon type="home" theme="filled" class="center-item outside" :style="item.style"/>
        </a-tooltip>
        <!--<a-popover v-for="(item, index) in outPointList" :key="'outside_' + index" :title="item.name">-->
        <!--  <template slot="content">-->
        <!--    <p>剧组：{{item.crew}}</p>-->
        <!--    <p>人员：{{item.person}}</p>-->
        <!--    <p>车辆：{{item.car}}</p>-->
        <!--  </template>-->
        <!--  <div class="center-item outside" :style="item.style"></div>-->
        <!--</a-popover>-->
      </template>
      <template v-if="showStudio">
        <a-tooltip placement="topLeft"  v-for="(item, index) in studioList" :key="'studio_' + index">
          <template slot="title">
            <p style="min-width: 120px;">{{item.name}}</p>
            <p>剧组：{{item.crew}}</p>
            <p>人员：{{item.person}}</p>
            <div>车辆：{{item.car}}</div>
          </template>
          <!--<div class="center-item studio" :style="item.style"></div>-->
          <a-icon type="home" theme="filled" class="center-item studio" :style="item.style"/>
        </a-tooltip>
        <!--<a-popover v-for="(item, index) in studioList" :key="'studio_' + index" :title="item.name">-->
        <!--  <template slot="content">-->
        <!--    <p>剧组：{{item.crew}}</p>-->
        <!--    <p>人员：{{item.person}}</p>-->
        <!--    <p>车辆：{{item.car}}</p>-->
        <!--  </template>-->
        <!--  <div class="center-item studio" :style="item.style"></div>-->
        <!--</a-popover>-->
      </template>
      <div class="legend">
        <p @click="showInside = !showInside">
          <!--<span class="legend-item" :class="{inside: showInside}"></span>-->
          <a-icon type="home" theme="filled" class="legend-item" :class="{inside: showInside}"/><span>实景基地</span>
        </p>
        <p @click="showOutside = !showOutside">
          <!--<span class="legend-item" :class="{outside: showOutside}"></span> 外景基地-->
          <a-icon type="home" theme="filled" class="legend-item" :class="{outside: showOutside}"/><span>外景基地</span>

        </p>
        <p @click="showStudio = !showStudio">
          <!--<span class="legend-item" :class="{studio: showStudio}"></span> 摄影棚-->
          <a-icon type="home" theme="filled" class="legend-item" :class="{studio: showStudio}"/><span>摄影棚</span>
        </p>
      </div>
    </div>
    <div class="mapBottom">
      <center-bottom></center-bottom>
    </div>
  </div>
</template>

<script>
import centerBottom from './centerBottom'
export default {
  data() {
    return {
      showInside: true,
      showOutside: true,
      showStudio: true,
      pointList: [
        {
          name: '屏岩洞府',
          crew: 1,
          person: 353,
          car: 47,
          style: {
            top: '180px',
            left: '530px',
          }
        },
        {
          name: '烈光坞',
          crew: 1,
          person: 276,
          car: 67,
          style: {
            top: '200px',
            left: '630px',
          }
        },
        {
          name: '梦外滩影视主题公园',
          crew: 3,
          person: 827,
          car: 133,
          style: {
            top: '240px',
            left: '560px',
          }
        },
        {
          name: '梦上海',
          crew: 2,
          person: 582,
          car: 72,
          style: {
            top: '230px',
            left: '590px',
          }
        },
        {
          name: '广州街香港街',
          crew: 1,
          person: 342,
          car: 67,
          style: {
            top: '300px',
            left: '400px',
          }
        },
        {
          name: '明清宫苑',
          crew: 5,
          person: 1279,
          car: 276,
          style: {
            top: '290px',
            left: '440px',
          }
        },
        {
          name: '华夏文化园',
          crew: 1,
          person: 239,
          car: 47,
          style: {
            top: '350px',
            left: '300px',
          }
        },
        {
          name: '大智禅寺',
          crew: 3,
          person: 625,
          car: 136,
          style: {
            top: '380px',
            left: '430px',
          }
        },
        {
          name: '合欢谷',
          crew: 1,
          person: 276,
          car: 67,
          style: {
            top: '360px',
            left: '580px',
          }
        },
        {
          name: '古民居景区',
          crew: 1,
          person: 248,
          car: 54,
          style: {
            top: '410px',
            left: '480px',
          }
        },
        {
          name: '横店明清民居博览城',
          crew: 2,
          person: 508,
          car: 98,
          style: {
            top: '420px',
            left: '530px',
          }
        },
        {
          name: '龙山佛境',
          crew: 3,
          person: 862,
          car: 176,
          style: {
            top: '430px',
            left: '500px',
          }
        },
        {
          name: '清明上河图',
          crew: 2,
          person: 457,
          car: 128,
          style: {
            top: '440px',
            left: '350px',
          }
        },
        {
          name: '横店影视城',
          crew: 5,
          person: 1578,
          car: 430,
          style: {
            top: '445px',
            left: '380px',
          }
        },
        {
          name: '秦王宫',
          crew: 4,
          person: 1272,
          car: 143,
          style: {
            top: '460px',
            left: '360px',
          }
        },
        {
          name: '圆明新园',
          crew: 2,
          person: 742,
          car: 181,
          style: {
            top: '530px',
            left: '260px',
          }
        },
        {
          name: '圆明新园万花园',
          crew: 1,
          person: 508,
          car: 43,
          style: {
            top: '540px',
            left: '230px',
          }
        },
        {
          name: '梦泉谷温泉度假村',
          crew: 1,
          person: 326,
          car: 73,
          style: {
            top: '510px',
            left: '350px',
          }
        },
        {
          name: '红军长征博览城',
          crew: 4,
          person: 1323,
          car: 234,
          style: {
            top: '530px',
            left: '310px',
          }
        },
        {
          name: '民国城',
          crew: 2,
          person: 476,
          car: 95,
          style: {
            top: '550px',
            left: '300px',
          }
        },
        {
          name: '中国革命战争博览城',
          crew: 2,
          person: 890,
          car: 146,
          style: {
            top: '540px',
            left: '340px',
          }
        },
      ],
      outPointList: [
        {
          name: '红树林影视基地',
          crew: 2,
          person: 848,
          car: 93,
          style: {
            top: '20px',
            left: '300px',
          }
        },
        {
          name: '大龙山影视基地',
          crew: 2,
          person: 982,
          car: 134,
          style: {
            top: '20px',
            left: '700px',
          }
        },
        {
          name: '祥胡影视基地',
          crew: 2,
          person: 748,
          car: 83,
          style: {
            top: '720px',
            left: '420px',
          }
        },
      ],
      studioList: [
        {
          name: '广州街摄影棚',
          crew: 5,
          person: 1325,
          car: 75,
          style: {
            top: '290px',
            left: '380px',
          }
        },
        {
          name: '华夏摄影棚',
          crew: 6,
          person: 1835,
          car: 97,
          style: {
            top: '340px',
            left: '280px',
          }
        },
        {
          name: '长征摄影棚',
          crew: 6,
          person: 1799,
          car: 94,
          style: {
            top: '520px',
            left: '290px',
          }
        },
      ]
    }
  },
  components: {
    centerBottom
  }
}
</script>

<style lang="scss" scoped>
#center {
  .center-box {
    position: relative;
    width:100%;
    height: 760px;
    background: url('~@/assets/img/hd-map1.png') no-repeat center center;
    background-size: contain;

    ::v-deep.ant-tooltip {
      min-width: 200px;
    }

    .center-item {
      position: absolute;
      //width: 20px;
      //height: 20px;
      //border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
    }

    .inside {
      //background: #ffc107;
      //box-shadow: #ffc107 0 0 20px;
      color: #ffc107;
    }
    .outside {
      //background: #ff5722;
      //box-shadow: #ff5722 0 0 20px;
      color: #ff5722;
    }
    .studio {
      //background: #33cea0;
      //box-shadow: #33cea0 0 0 20px;
      color: #33cea0;
    }

    .legend {
      position: absolute;
      right: 20px;
      bottom: 10px;
      font-size: 16px;
      p {
        cursor: pointer;
      }
      .legend-item {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        //background: #999999;
        //box-shadow: #999999 0 0 20px;
        color: #999999;
        vertical-align: middle;
      }

      .inside {
        //background: #ffc107;
        //box-shadow: #ffc107 0 0 20px;
        color: #ffc107;
      }
      .outside {
        //background: #ff5722;
        //box-shadow: #ff5722 0 0 20px;
        color: #ff5722;
      }
      .studio {
        //background: #33cea0;
        //box-shadow: #33cea0 0 0 20px;
        color: #33cea0;
      }
    }
  }

  .mapBottom {
    padding: 0 15px;
  }
}
</style>
